<template>
  <div class="container">
    <view v-if="type==1">
      <uv-cell-group :border="false">
        <uv-cell title="屏蔽的用户（0/200人）" :border="false" isLink @click="type=2"></uv-cell>
        <uv-cell title="不看TA的动态（0/200人）" isLink :border="false"></uv-cell>
      </uv-cell-group>

      <uv-empty text="暂时没有屏蔽的人哦～" icon="https://oss.seenlove.com/images/ef9df8853ec274f4caa21a64895b9a7e.png"></uv-empty>
    </view>

    <!-- 屏蔽的用户 -->
    <view v-else-if="type==2" class="list">
      <view class="box flex justifyBetween alignCenter" v-for="item in 20" :key="item">
        <view class="flex alignCenter">
          <uv-avatar size="50" src="https://via.placeholder.com/200x200.png/2878ff" mode="aspectFill"></uv-avatar>
          <view class="info">
            <view class="name fz16">Sunny</view>
            <view class="desc fz12">90年·现居深圳</view>
          </view>
        </view>
        <view class="btn fz12">取消屏蔽</view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
let type = ref(1);
</script>



<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fafafa;
  .uv-empty {
    width: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .list {
    padding: 0 16px;
    .box {
      padding: 10px 0;
      border-bottom: 1px solid #f8f8f8;
      .info {
        margin-left: 10px;
        .desc {
          color: #999999;
        }
      }
      .btn {
        color: white;
        padding: 5px 17px;
        border-radius: 18.5px;
        background-color: #9e06ff;
      }
    }
  }
}
</style>



